<template>
	<view class="recommendsongs">
		<view class="top">
			<view class="foryou">
				<text>{{title}}</text>
			</view>
			<view class="more">
				<image :src="require('@/static/images/right.png')" style="width: 30rpx;height: 30rpx;">
			</view>
		</view>
		<view class="bowwon">
			<scroll-view scroll-x="true" show-scrollbar="true" class="scroll-content">
				<view class="scrollitem" v-for="item,index in songslist" :key="index">
					<view class="imgbox">
						<img :src="item.picUrl" alt="" class="imgitem">
					</view>
					<view class="desc">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			songslist: Array,
			title: String
		},
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {}
	}
</script>

<style>
	.foryou {
		color: white;
		font-size: 50rpx;
		font-weight: 700;
		margin-left: 40rpx;
	}

	.more {
		color: #bfbfbf;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.imgitem {
		width: 250rpx;
		height: 250rpx;
		border-radius: 30rpx;
		border: 1px solid white;
	} 

	.more {
		margin-right: 40rpx;
	}

	.desc {
		width: 300rpx;
		color: white;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.scrollitem {
		width: 33.3%;
		padding: 40rpx;
		display: inline-block;
	}

	.scroll-content {
		width: 100%;
		white-space: nowrap;
	}
</style>
